window.onload = function () {
    // 设置常量
    var index = -1;

    // 左侧WDL元素
    var lwin = document.getElementById("lwin");
    var ldraw = document.getElementById("ldraw");
    var llose = document.getElementById("llose");
    // 右侧WDL元素
    var rwin = document.getElementById("rwin");
    var rdraw = document.getElementById("rdraw");
    var rlose = document.getElementById("rlose");
    // 队名
    var leftteamname = document.querySelector('#wrap #banner .left #box h1');
    var rightteamname = document.querySelector('#wrap #banner .right #box h1');

    // 设置点击函数
    function myClick(obj, fun) {
        obj.onclick = function () {
            fun();
        }
    };

    // 设置赛制按钮的方法
    var btn01 = document.getElementById('btn01');
    myClick(btn01, function () {
        if (index < 9) {
            index++;
        } else {
            index = 0;
        }
        changegame(index);
    });
    // 开始按钮方法
    var btn03 = document.getElementById('btn03');
    myClick(btn03, function () {
        setTime();
        alert('比赛BP即将开赛');
    });
    // 修改队名按钮点击事件:
    var btn04 = document.getElementById('btn04');
    myClick(btn04, settingbox);
    // 关闭所有窗口方法
    var btn05 = document.getElementById("btn05");
    myClick(btn05, function () {
        var survivorchoosebox = document.querySelector('#wrap #maincontent .contentWrap .survivorchoosebox');
        var hunterchoosebox = document.querySelector('#wrap #maincontent .contentWrap .hunterchoosebox');
        var settingbox = document.querySelector('#wrap #maincontent .contentWrap .changeTeamDetial');
        closebox(survivorchoosebox);
        closebox(hunterchoosebox);
        closebox(settingbox);
    })


    // 设置下滑#banner
    function movebanner(){
        var banner = document.querySelector('#wrap #banner');
        banner.style.bottom = '0px';
        banner.style.zIndex = 10;
        var canvas = document.getElementById('canvas');
        canvas.style.width = '1525px';
        canvas.style.height = '100%';
    };



    function closebox(obj) {
        obj.style.width = '0';
        obj.style.height = '0';
    }
    function openbox(obj) {
        obj.style.width = '600px';
        obj.style.height = '320px';
    }


    // 改变队伍的名字点击事件
    var change = document.getElementById('change');
    myClick(change, function () {
        //   获取两个战队的输入框值
        var team1 = document.getElementById("team1").value;
        var team2 = document.getElementById("team2").value;
        // 获取左右两边的名字
        var leftteamname = document.querySelector('#wrap #banner .left #box h1');
        var rightteamname = document.querySelector('#wrap #banner .right #box h1');
        leftteamname.innerHTML = team1;
        rightteamname.innerHTML = team2;
    });
    // 交换函数
    function exchangeFun(obj1, obj2) {
        var temp = obj2.innerHTML;
        obj2.innerHTML = obj1.innerHTML;
        obj1.innerHTML = temp;
    }

    function exchangeNum(obj1, obj2) {
        var temp = Number(obj2.innerHTML);
        obj2.innerHTML = Number(obj1.innerHTML);
        obj1.innerHTML = temp;
    }

    // 双方换边功能按钮
    var exchange = document.getElementById('exchange');
    exchange.onclick = function () {
        // 交换队名
        exchangeFun(leftteamname, rightteamname);
        // 交换WDL
        exchangeNum(lwin, rwin);
        exchangeNum(ldraw, rdraw);
        exchangeNum(llose, rlose);
    }

    // 设置加的方法
    function setAdd(element) {
        element.innerHTML = Number(element.innerHTML) + 1;
    }
    // 设置减的方法
    function setSub(element) {
        element.innerHTML = Number(element.innerHTML) - 1;
    }
    // 设置WDL加减法
    addsubWDL();
    function addsubWDL() {
        //    设置左侧队伍WDL加减
        var addlw = document.getElementById('addlw');
        addlw.onclick = function () {
            setAdd(lwin);
        };
        var sublw = document.getElementById('sublw');
        sublw.onclick = function () {
            setSub(lwin);
        };
        var addld = document.getElementById('addld');
        addld.onclick = function () {
            setAdd(ldraw);
        };
        var subld = document.getElementById('subld');
        subld.onclick = function () {
            setSub(ldraw);
        }
        var addll = document.getElementById('addll');
        addll.onclick = function () {
            setAdd(llose);
        };
        var subll = document.getElementById('subll');
        subll.onclick = function () {
            setSub(llose);
        };
        // 设置右侧队伍WDL加减
        var addrw = document.getElementById('addrw');
        addrw.onclick = function () {
            setAdd(rwin);
        };
        var subrw = document.getElementById('subrw');
        subrw.onclick = function () {
            setSub(rwin);
        };
        var addrd = document.getElementById('addrd');
        addrd.onclick = function () {
            setAdd(rdraw);
        };
        var subrd = document.getElementById('subrd');
        subrd.onclick = function () {
            setSub(rdraw)
        };
        var addrl = document.getElementById('addrl');
        addrl.onclick = function () {
            setAdd(rlose);
        }
        var subrl = document.getElementById('subrl');
        subrl.onclick = function () {
            setSub(rlose);
        };
    }


    // 清空DWL
    clearWDL();
    function clearWDL() {
        var clearWDL = document.querySelector('#wrap #maincontent .contentWrap .changeTeamDetial .footerWrap #clearWDLWrap .clearWDL');
        myClick(clearWDL, function () {
            lwin.innerHTML = '0';
            ldraw.innerHTML = '0';
            llose.innerHTML = '0';
            rwin.innerHTML = '0';
            rdraw.innerHTML = '0';
            rlose.innerHTML = '0';
        })
    }

    // 切换赛制方法
    function changegame(index) {
        var pNode = document.querySelector('#wrap #banner .middle p');
        switch (index) {
            case 0:
                pNode.innerHTML = 'BO1上半场';
                break;
            case 1:
                pNode.innerHTML = 'BO1下半场';
                break;
            case 2:
                pNode.innerHTML = 'BO2上半场';
                break;
            case 3:
                pNode.innerHTML = 'BO2下半场';
                break;
            case 4:
                pNode.innerHTML = 'BO3上半场';
                break;
            case 5:
                pNode.innerHTML = 'BO3下半场';
                break;
            case 6:
                pNode.innerHTML = 'BO4上半场';
                break;
            case 7:
                pNode.innerHTML = 'BO4下半场';
                break;
            case 8:
                pNode.innerHTML = 'BO5上半场';
                break;
            case 9:
                pNode.innerHTML = 'BO5下半场';
                break;
        }
    }

    // 倒计时时间
    var oldtime = 60;
    // 设置倒计时方法
    function setTime() {
        var time = document.querySelector('#wrap #bpListWrap .map h1');

        setInterval(function () {
            if (oldtime == -1 || typeof (oldtime) == 'string') {
                time.innerHTML = oldtime;
                clearInterval();
                time.style.color = 'red';
            } else {
                time.innerHTML = oldtime;
                oldtime--
            }
        }, 1000);
    };
    // 点击更换地图功能
    changemap();
    function changemap() {
        var btn02 = document.getElementById('btn02');
        var img = document.querySelector('#wrap #bpListWrap .map .maplist img');
        var index = 1;
        var map = Data.mapsrc;
        var title = document.querySelector('#wrap #bpListWrap .map .advertisement p');
        myClick(btn02, function () {
            if (index < map.length && index >= 0) {
                img.src = map[index].url;
                title.innerHTML = map[index].name;
                index++;
            } else {
                index = 1
                img.src = map[0].url;
                title.innerHTML = map[0].name;
            }

        })
    }
    // 弹出设置框
    function settingbox() {
        var settingbox = document.querySelector('#wrap #maincontent .contentWrap .changeTeamDetial');
        openbox(settingbox);
        // 关闭求生者选择框和监管者选择框
        var survivorchoosebox = document.querySelector('#wrap #maincontent .contentWrap .survivorchoosebox');
        closebox(survivorchoosebox);
        var hunterchoosebox = document.querySelector('#wrap #maincontent .contentWrap .hunterchoosebox');
        closebox(hunterchoosebox);
    }

    // 弹出监管者选择框
    function hunterchoosebox() {
        var hunterchoosebox = document.querySelector('#wrap #maincontent .contentWrap .hunterchoosebox');
        openbox(hunterchoosebox)
        // 并关闭求生者选择框
        var survivorchoosebox = document.querySelector('#wrap #maincontent .contentWrap .survivorchoosebox');
        closebox(survivorchoosebox);
        var settingbox = document.querySelector('#wrap #maincontent .contentWrap .changeTeamDetial');
        closebox(settingbox);
    }

    // 弹出求生者选择框
    function survivorchoosebox() {
        var survivorchoosebox = document.querySelector('#wrap #maincontent .contentWrap .survivorchoosebox');
        openbox(survivorchoosebox);
        // 并关闭求生者选择框
        var hunterchoosebox = document.querySelector('#wrap #maincontent .contentWrap .hunterchoosebox');
        closebox(hunterchoosebox);
        var settingbox = document.querySelector('#wrap #maincontent .contentWrap .changeTeamDetial');
        closebox(settingbox);
    }

    // 动态渲染监管者角色框
    hunterchooseboxData();
    function hunterchooseboxData() {
        var hunterlist = document.querySelector('#wrap #maincontent .contentWrap .hunterchoosebox ul');
        // 2.获取数据
        var hunterimg = Data.hunterimg;
        for (var i = 0; i < hunterimg.length; i++) {
            var imgNodes = document.createElement('img');
            var liNodes = document.createElement('li');
            imgNodes.src = hunterimg[i].url;
            liNodes.appendChild(imgNodes);
            hunterlist.appendChild(liNodes);
        }
    };

    // 动态渲染求生者角色框
    survivorchooseboxData();
    function survivorchooseboxData() {
        var survivorlist = document.querySelector('#wrap #maincontent .contentWrap .survivorchoosebox ul');
        // 2.获取数据
        var survivorimg = Data.survivorimg;
        for (var i = 0; i < survivorimg.length; i++) {
            var imgNodes = document.createElement('img');
            var liNodes = document.createElement('li');
            imgNodes.src = survivorimg[i].url;
            liNodes.appendChild(imgNodes);
            survivorlist.appendChild(liNodes);
        }
    };

    // 求生者ban监管者
    bansurvior();
    function bansurvior() {
        var ilist = document.querySelectorAll('#wrap #maincontent .survivor-ban li img');
        for (var i = 0; i < ilist.length; i++) {
            // 设置ilist的banindex属性
            ilist[i].setAttribute('banindex', i);
            ilist[i].onclick = function () {
                var banindex = this.getAttribute('banindex');
                hunterchoosebox();
                var imglist = document.querySelectorAll('#wrap #maincontent .contentWrap .hunterchoosebox ul li img');
                for (var j = 0; j < imglist.length; j++) {
                    imglist[j].setAttribute('index', j);
                    imglist[j].onclick = function () {
                        // 获得了图片的index下标
                        var index = this.getAttribute('index');
                        ilist[banindex].src = Data.hunterimg[index].banurl;
                        oldtime = 60;
                    }
                }
            };
        }
    };
    //监管者ban求生者
    banhunter();
    function banhunter() {
        var ilist = document.querySelectorAll('#wrap #maincontent .hunter-ban li img');
        for (var i = 0; i < ilist.length; i++) {
            // 设置ilist的banindex属性
            ilist[i].setAttribute('banindex', i);
            ilist[i].onclick = function () {
                var banindex = this.getAttribute('banindex');
                survivorchoosebox();
                var imglist = document.querySelectorAll('#wrap #maincontent .contentWrap .survivorchoosebox ul li img');
                for (var j = 0; j < imglist.length; j++) {
                    imglist[j].setAttribute('index', j);
                    imglist[j].onclick = function () {
                        // 获得了图片的index下标
                        var index = this.getAttribute('index');
                        ilist[banindex].src = Data.survivorimg[index].banurl;
                        oldtime = 60;
                    }
                }
            };
        }
    };


    // 求生者选取角色
    choosesurvivor();
    function choosesurvivor() {
        var survivorList = document.querySelectorAll('#wrap #bpListWrap .surList li .wrap img');
        for (var i = 0; i < survivorList.length; i++) {
            survivorList[i].setAttribute('chooseindex', i);
            survivorList[i].onclick = function () {
                // 弹出求生者选择框
                survivorchoosebox();
                var chooseindex = this.getAttribute('chooseindex');
                var hNodes = document.querySelectorAll('#wrap #bpListWrap .surList li .name h1');
                var imglist = document.querySelectorAll('#wrap #maincontent .contentWrap .survivorchoosebox ul li img');
                var showimgs = document.querySelectorAll('#wrap #canvas .showsurvivor img');
                for (var j = 0; j < imglist.length; j++) {
                    imglist[j].setAttribute('index', j);
                    imglist[j].onclick = function () {
                        var index = this.getAttribute('index')
                        survivorList[chooseindex].src = Data.survivorimg[index].pickurl;
                        hNodes[chooseindex].innerHTML = Data.survivorimg[index].name;
                        oldtime = 60;
                        showimgs[chooseindex].src =  Data.survivorimg[index].pickurl;
                    }
                }
            }
        }

    };

    // 监管者选择角色
    choosehunter();
    function choosehunter() {
        var hunter = document.querySelector('#wrap #bpListWrap .hunterchoose .wrap img');
        hunter.onclick = function () {
            // 弹出监管者选择框
            hunterchoosebox();
            var h = document.querySelector('#wrap #bpListWrap .hunterchoose .name h1');
            var imglist = document.querySelectorAll('#wrap #maincontent .contentWrap .hunterchoosebox ul li img');
            var showimg = document.querySelector('#wrap #canvas .showhunter img');
            for (var j = 0; j < imglist.length; j++) {
                imglist[j].setAttribute('index', j);
                imglist[j].onclick = function () {
                    var index = this.getAttribute('index');
                    hunter.src = Data.hunterimg[index].pickurl;
                    h.innerHTML = Data.hunterimg[index].name;
                    showimg.src = Data.hunterimg[index].pickurl;
                    oldtime = '游戏即将开始!';
                    setTimeout(function(){
                        movebanner();
                    },5000);
                }
            }
        }
    };
}